<template>
  <div class="home">
    <!-- 头部 -->
    <header-top></header-top>
    <hr/>
    <el-tabs v-model="activeName" @tab-click="handleClick" class="index-tab">
        <!-- 轮播 -->
        <el-carousel :interval="5000" arrow="always">
            <el-carousel-item v-for="item in 5" :key="item">
              <img :src='"./../../../assets/images/home"+item+".png"' alt="" style="width: 1200px">
            </el-carousel-item>
        </el-carousel>
        <el-tab-pane label="首页" name="first">
          <el-button type="primary" @click="handleExpress(1)" style="margin: 10px auto">寄件\发件</el-button>
          <el-button type="primary" @click="handleExpress(2)" style="margin: 10px auto">后台管理</el-button>
          <h2 class="index-title">平台介绍</h2>
          <div v-html="platformDetail">{{platformDetail}}</div>
        </el-tab-pane>

        <el-tab-pane label="快递公司" name="second">
          <h2 class="index-title">快递公司</h2>
          <el-row :gutter="20">
            <el-col :span="6" v-for="(item,index) in expressList" :key="index" style="margin-top: 10px">
              <el-card>
                <img :src="item.imgUrl" class="image">
                <div class="kd">
                  <p>名称：{{item.expressName}}</p>
                  <p>简介：{{item.expressJianjie}}</p>
                  <p>理念：{{item.expressJyln}}</p>
                  <p>特色：{{item.expressTeshe}}</p>
                  <div class="bottom clearfix">
                    <el-button type="text" class="button" @click="handleDetail(item.id)">查看详情</el-button>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-tab-pane>

        <el-tab-pane label="相关网点" name="third">
          <h2 class="index-title">相关网点</h2>
          <div class="search">
            <el-input v-model="name" placeholder="请输入网点名称" prefix-icon="el-icon-search" class="searchInfo"/>
            <el-select v-model="companyId" placeholder="请选择快递公司">
                <el-option v-for="(item,index) in expressList" :key="index" :label="item.expressName" :value="item.id"></el-option>
            </el-select>
            <el-cascader
              :options="CityInfo"
              v-model="selectedOptions"
              @change="handleChange"
              :clearable="true"
              :filterable="true"
              placeholder="请选择地区"
              class="el-cascader-ex">
            </el-cascader>
            <el-button type="primary" @click="searchDot">查询</el-button>
          </div>
          <el-row :gutter="20">
            <el-col :span="6" v-for="(item,index) in dotList" :key="index" style="margin-top: 10px">
              <el-card>
                <img :src="item.imgUrl" class="image">
                <div class="kd">
                  <p>网点名称：{{item.name}}</p>
                  <p>联系人：{{item.linkman}}</p>
                  <p>联系人电话：{{item.telephone}}</p>
                  <p>所在地址：{{item.province+item.city+item.area}}</p>
                  <p>公司名称：{{item.companyName?item.companyName:'暂无公司'}}</p>
                  <!-- <div class="bottom clearfix">
                    <el-button type="text" class="button" @click="handleDetail(item.id)">查看详情</el-button>
                  </div> -->
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-tab-pane>

        <el-tab-pane label="用户须知" name="fourth">
          <h2 class="index-title">用户须知</h2>
          <div v-html="userKnow">{{userKnow}}</div>
        </el-tab-pane>
        <el-tab-pane label="关于我们" name="five">
          <h2 class="index-title">关于我们</h2>
          <div v-html="aboutus">{{aboutus}}</div>
        </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import CityInfo from '@/lib/city-data'
import global from '@/lib/global'
import qs from 'qs'
import router from './../../../router'
import Header from './../../common/header'
let that;
export default {
    name:'index',
    components:{
        'header-top': Header
    },
    data() {
      return {
        activeName: 'first',
        platformDetail:'',
        expressList:[],
        userKnow:'',
        aboutus:'',
        dotList:[],
        searchInfo:'',
        companyId:'',
        name:'',
        selectedOptions:[],
        CityInfo,
        province:'',
        city:'',
        area:'',
        userType: sessionStorage.getItem('userType')
      };
    },
    beforeCreate: function () {
        that = this;
    },
    created(){
      // 获取平台简介
      this.getData(global.baseUrl + '/open/pingtaiInfo','','get',(resp)=>{
          if(resp.data.success){
              this.platformDetail =  resp.data.data.platformDetail
          }else{
              this.$message.error(resp.data.message);
          }
      })
      // 获取快递公司列表
      this.getData(global.baseUrl + '/open/getAllCompanyList','','get',(resp)=>{
          if(resp.data.success){
              this.expressList = resp.data.data;
          }else{
              this.$message.error(resp.data.message);
          }
      })
      // 获取网点列表
      this.getData(global.baseUrl + '/storeInfo/getAllWangDian','','get',(resp)=>{
          console.log(resp)
          if(resp.data.msg == '请求成功'){
              this.dotList = resp.data.data;
          }else{
              this.$message.error(resp.data.message);
          }
      })
      // 获取用户须知
      this.getData(global.baseUrl + '/open/userKnow','','get',(resp)=>{
          if(resp.data.success){
              this.userKnow = resp.data.data.knowContent;
          }else{
              this.$message.error(resp.data.message);
          }
      })
      // 获取关于我们
      this.getData(global.baseUrl + '/open/aboutus','','get',(resp)=>{
          if(resp.data.success){
              this.aboutus = resp.data.data.aboutDetail;
          }else{
              this.$message.error(resp.data.message);
          }
      })
    },
    methods: {
      // 查找网点
      searchDot(){
        this.getData(global.baseUrl + '/storeInfo/getAllWangDian?name='+this.name+'&province='+this.province+'&city='+this.city+'&area='+this.area+'&companyId='+this.companyId,'','get',(resp)=>{
            console.log(resp)
            if(resp.data.msg == '请求成功'){
                this.dotList = resp.data.data;
            }else{
                this.$message.error(resp.data.message);
            }
        })
      },
      handleChange(value) {
          this.province = this.$options.filters['myAddressCity'](this.selectedOptions[0])
          this.city = this.$options.filters['myAddressErae'](this.selectedOptions[1])
          this.area = this.$options.filters['myAddressMinerae'](this.selectedOptions[2])
      },
      handleClick(tab, event) {
        // console.log(tab, event);
      },
      handleExpress(type){ 
        if(type == 1){
          console.log(this.userType);
          if(this.userType == "快递员"){
            router.push("/courier")
          }else if(this.userType == "网点"){
            router.push("/dot")
          }else if(this.userType == "中转站"){
            router.push("/transferStation")
          }else{
            router.push("/express")
          }
        }else{
         window.location.href = "http://localhost:8099/web/pages/login.html"
        }
      },
      // 公司详情 
      handleDetail(id){
        router.push("/detail?id="+id)
      },
      getData(url,data,type,fn){
          this.$axios({
              headers: {
                  'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
                  'token':sessionStorage.getItem('token')
              },
              method: type,
              url: url,
              data: qs.stringify(data)
          }).then((resp)=>{
              if(fn){
                  fn(resp);
              }else{
                  console.log(resp);
              }
          })
          .catch((error)=>{
              console.log(error);
              this.$message.error('网络出错了');
          })
      },
    },
    filters:{
        myAddressCity:function(value){
            for(var y in that.CityInfo){
                if(that.CityInfo[y].value == value){
                    return value = that.CityInfo[y].label
                }
            }
        },
        myAddressErae:function(value){
            for(var y in that.CityInfo){
                for(var z in that.CityInfo[y].children){
                    if(that.CityInfo[y].children[z].value == value && value!=undefined){
                        return value = that.CityInfo[y].children[z].label;
                    }
                }
            }
        },
        myAddressMinerae:function(value){
            for(var y in that.CityInfo){
                for(var z in that.CityInfo[y].children){
                    for(var i in that.CityInfo[y].children[z].children){
                        if(that.CityInfo[y].children[z].children[i].value == value && value!=undefined){
                            return value = that.CityInfo[y].children[z].children[i].label
                        }
                    }
                }
            }
        },
    }
}
</script>

<style>
    .home{
       width: 1200px;
       margin: 0 auto;
    }
    .index-tab{
      text-align: left;
    }
    .el-tabs__item{
      font-size: 18px;
      height: 80px;
      line-height: 80px;
    }
    .index-title{
      text-align: left;
      margin-left: 20px;
      position: relative;
    }
    .index-title::before{
      content: '';
      width: 5px;
      height: 30px;
      background: #5e9ff1;
      position: absolute;
      left: -20px;
      top: 0;
    }
    .com-img{
      width: 1200px;
    }
    .com-con{
      font-size: 16px;
      text-align: left;
      text-indent: 2em;
      line-height: 35px;
    }
    .el-card__body{
      min-height: 260px;
    }
    .el-card__body{
      position: relative;
    }
    .image{
      width: 236px;
      height: 80px;
    }
    .kd p{
      overflow: hidden;
      text-overflow:ellipsis;
      white-space: nowrap;
    }
    .searchInfo{
      display: inline-table;
      width: 160px;
    }
</style>